@extends('home.layout')
@section('css')
	.index2_content
	{
		width:100%;
	}
	.goods_pic{
		width:1200px;
		margin:0px auto;
	}
	.img{
		width:224px;
		height:400px;
		margin:20px 8px 0 8px;	
		float:left;
	}
	.image{
		width:224px;
		height:340px;
		<!-- background:yellow; -->
	}
	.image_title{
		width:224px;
		height:60px;
		<!-- background:green; -->
	}
	.type:hover
	{
	 	color:#f69;
	 	cursor:pointer;
	}
	.attr:hover
	{
	 	color:#f69;
	 	cursor:pointer;
	}
	.attrname{
		border:1px solid #ccc;
		width:1200px;
		height:40px;
		line-height:40px;
	}
	.abc{
		width:1200px;
		margin:0 auto;
	}
	.index2_search_1{
		width:1200px;
		height:40px;
		margin:10px auto;
		line-height:40px;
	}
	.index2_search_2{
		width:1200px;
		height:40px;
		border:1px solid #ccc;
		margin:5px auto;
		line-height:40px;		
	}
	.index2_goods_attr_value{
		width:1200px;
		height:40px;
		border:1px solid #ccc;
		margin:5px auto;
		line-height:40px;		
	}
	.aba{
		border:1px solid #ccc;
	}
	.aba:hover{
		border:1px solid #f69;
		color:#f69;
	}
	button{
		background:white;
		border:1px solid #ccc;
	}
	button:hover{
		border:1px solid #f69;
	}
	.index2_goods_title_1{
		width:224px;
		height:30px;
		line-height:30px;
		<!-- background:red; -->
	}
	.index2_goods_title_2{
		width:224px;
		height:30px;
		<!-- background:pink; -->
		line-height:30px;
		display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
	}
@endsection
@section('content')
	<div class="index2_search" style="width:100%">
		<div class ="abc">
			<div class="index2_search_1">
				<div style="float:left;margin-left:10px;"><b>{{$cname}}:</b></div>
				<div class="qingkong" style="float:right;width:120px;"><a href="/home/index/index2/{{$cid}}">清空所有搜索条件</a></div>
				<!-- <div class="aba" style="float:left;margin-left:10px;background:;height:20px;line-height:20px;margin:10px 10px;">&nbsp;类目:衬衫裙&nbsp;<span style="border:1px solid #ccc;color:black;">X</span>&nbsp;</div> -->
			</div>

			<div class="index2_search_2"><!-- 
				<div style="float:left;margin-left:10px;">类目:</div>
				<div class="type" name="type" style="float:left;margin-left:10px;" cid="27">吊带连衣裙</div>
				<div class="type" name="type" style="float:left;margin-left:10px;" cid="28">衬衫裙</div> -->
			</div>

			<!-- <div class="index2_goods_attr_value">
				<div style="float:left;margin-left:10px;">厚度:</div>
				<div class="attr" name="厚度" style="float:left;margin-left:10px;" attrdetails_id="121">适中</div>
				<div class="attr" name="厚度" style="float:left;margin-left:10px;" attrdetails_id="122">薄款</div>
			</div>
			<div class="index2_goods_attr_value">
				<div style="float:left;margin-left:10px;">颜色:</div>
				<div class="attr" name="颜色" style="float:left;margin-left:10px;" attrdetails_id="xxx">白色</div>
				<div class="attr" name="颜色" style="float:left;margin-left:10px;" attrdetails_id="xxx">黑色</div>
			</div> -->

		</div>

		
	</div>
	<div class="index2_content">
		<div class="goods_pic">

			<div class="img">
				<div class="image">图片放在此处</div>
				<div class="image_title">
					<div class="index2_goods_title_1">
						<span style="float:left;font-size:20px;color:#f69;">￥999</span>
						<span style="float:right;">销量:0&nbsp;</span>
					</div>
					<div class="index2_goods_title_2">
						&nbsp;&nbsp;文字写在此处文字写在此处文字写文字写处文字写处处文字写处文字写处文字写处文字写处文字写处文字写处
					</div>
				</div>
			</div>
<!-- 		<div class="img">
				<div class="image">图片放在此处</div>
				<div class="image_title">
					<div class="index2_goods_title_1">
						<span style="float:left;font-size:20px;color:#f69;">￥999</span>
						<span style="float:right;">销量:0&nbsp;</span>
					</div>
					<div class="index2_goods_title_2">
						&nbsp;&nbsp;文字写在此处文字写在此处文字写文字写处文字写处处文字写处文字写处文字写处文字写处文字写处文字写处
					</div>
				</div>
			</div> -->
<!-- 			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>		
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div>		
			<div class="img"><div class="image">图片放在此处</div><div class="image_title">文字写在此处</div></div> -->  
		</div>
	</div>


	<!-- 按条件查询到的图片瀑布流start -->

	<!-- 按条件查询到的图片瀑布流end -->



    <script>
    	// 在lavral框架里使用 ajax时需要有一个头文件
		$.ajaxSetup({
			headers:{
				'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
			}
		});


		//使用agax  根据传过来的cid查询 该根目录cid下所有的类目
		$.ajax({
			type:'POST',
			url:'/home/index/ajax1',
			data:'cid='+{{$cid}} ,
			success:function(data)
			{	
				// console.log(data);
				var count = data.length;
				var b="<div style=float:left;margin-left:10px;>类目:</div>";
				for(i=0;i<count;i++)
				{
					b+="<div class=type name=type style=float:left;margin-left:10px; cid="+data[i].id+">"+data[i].name+"</div>";
				}
				$('.index2_search_2').html(b);	
			},
			dataType:'json'
		})


		//根据传过来的arrtname查询所有的attr的值
		function function1(attrname)
		{			
			$.ajax({
				type:'POST',
				url:'/home/index/ajax3',
				data:'attrname='+attrname ,
				success:function(data)
				{	
					// console.log(data);

					var count = data.length;
					var b="<div class=index2_goods_attr_value><div style=float:left;margin-left:10px;>"+attrname+":</div>";
					for(i=0;i<count;i++)
					{
						b+="<div class=attr name="+attrname+" style=float:left;margin-left:10px; attrdetails_id="+data[i].id+">"+data[i].name+"</div>";
					}
					$('.abc').append(b);
					// alert(b);	
				},
				dataType:'json'
			})
		}

		//根据传过来的cid查询所有的attrname 和attr的值
		$.ajax({
			type:'POST',
			url:'/home/index/ajax2',
			data:'cid='+{{$cid}} ,
			success:function(data)
			{	
				// console.log(data);

				var count = data.length;
				var b="";
				for(i=0;i<count;i++)
				{
					function1(data[i].name);
				}
				
				
				// alert(b);	
			},
			dataType:'json'
		})
		$('.index2-search_2').html();


		//根据查询条件查询商品
		function function2(t)
		{
			console.log(t);
			var t = eval('(' +'{'+t+'}' + ')');
			console.log({t});
			// return false;
			$.ajaxSetup({
			headers:{
				'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
			}
			});
			//根据传过来的cid查询所有的类目
			$.ajax({
				type:'POST',
				url:'/home/index/ajax10',
				data:{t} ,
				success:function(data)
				{	
					// alert(data)
					var goods_data = data;
					console.log(goods_data);
				},
				dataType:'json'
			})
		}


		//根据查询条件在goods表中查询数据并返回
		function function3(tt)
		{
			// console.log(tt);
			// return false;
			$.ajaxSetup({
			headers:{
				'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
			}
			});
			
			$.ajax({
				type:'POST',
				url:'/home/index/ajax4',
				data:'tt='+tt ,
				success:function(data)
				{	
					$('.goods_pic').empty();
					// console.log(data);
					// return false;
					// var data = data;
					var b='';
					for(var i=0;i<data.length;i++)
					{
		
						b+='<div class="img"><div class="image"><a href="/home/goods/details/'+data[i].id+'"><img src='+data[i].logo+'></a></div><div class="image_title"><div class="index2_goods_title_1"><span style="float:left;font-size:20px;color:#f69;">￥'+data[i].value+'</span><span style="float:right;">销量:'+data[i].sellnum+'&nbsp;</span></div><div class="index2_goods_title_2">&nbsp;&nbsp;'+data[i].goodsname+'</div></div></div>';	

					}
				 	$('.goods_pic').append(b);
				},
				dataType:'json'
			})
		}


		
		// 刚刚进入这个页面时 下面的商品应该是根据 根cid 查询出来的
		var tt = "cid="+{{$cid}};
		
		//调用goods表 按条件查询函数
		function3(tt);




		//条件的拼接（包括类目条件和属性条件）
		var tiaojian="";
		var tt="";

		//类目条件的拼接
		$('.type').live('click',function()
		{
			// tiaojian += "cid" + ":" + $(this).attr('cid')+",";
			tt +="type=\"" + $(this).attr('cid')+"\" and ";

			//隐藏类目div
			$(this).parent().hide();

			//已选择条件栏出现对应的选择条件
			var content = '<div class="aba" style="float:left;margin-left:10px;background:;height:20px;line-height:20px;margin:10px 5px;">&nbsp;类目:'+$(this).html()+'&nbsp;<span style="border:1px solid #ccc;color:black;">X</span>&nbsp;</div>';
			$('.index2_search_1').append(content);
			
			var t=tiaojian;

			//调用goods表 按条件查询函数
			function3(tt); 
		})

		//属性条件的拼接
		$('.attr').live('click',function()
		{
			tiaojian +=$(this).attr('name')+":\""+$(this).html()+"\",";
			tt+=$(this).attr('name')+"=\""+$(this).html()+"\" and ";

			//隐藏该条属性div
			$(this).parent().hide();

			//已选择条件栏出现对应的选择条件
			var content = '<div class="aba" style="float:left;margin-left:10px;background:;height:20px;line-height:20px;margin:10px 5px;">&nbsp;'+ $(this).attr('name') +':'+ $(this).html() +'&nbsp;<span style="border:1px solid #ccc;color:black;">X</span>&nbsp;</div>';
			$('.index2_search_1').append(content);
			var t=tiaojian;
			//调用goods表 按条件查询函数
			function3(tt);
		})
	</script>
@endsection



        




